<template>
    <section>
        <router-link tag="div" to="/login">
        <div class="myinfo">
            <img src="" alt="" class="info-img">
            <div class="login">
                <p>{{mes}}</p>
                <div>
                    <span class="iconfont">&#xe65f;</span>
                    <span>{{dat}}</span>
                </div>
                <span class="iconfont ico">&#xe612;</span>
            </div>
        </div>
        </router-link>
    </section>
</template>
<script>
export default {
    data(){
        return{
            mes:'登录/注册',
            dat:'登录后享受更多特权'
        }
    },
    mounted() {
        if(!localStorage.uname){
            this.mes= '登录/注册'
            this.dat= '登录后享受更多特权'
        }else{
        this.mes=localStorage.uname
        this.dat=localStorage.uid
        }
    },
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
.myinfo
    background $bgColor
    display flex
    padding 6.666667vw 4vw
    color #fff
    align-items center
    .info-img
        width 16vw
        height 16vw
        border-radius 50%
        color #f00
        // border 1px solid #f00
    .login 
        margin-left 4.8vw
        flex-grow 1
        position relative
        p 
            font-size .46rem
            margin-bottom 2.133333vw
            font-weight 700
        .ico 
            position absolute
            right 0
            top 5vw
            font-size 3vw
</style>
